const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');

const PORT = 3001;

// MIME类型映射
const mimeTypes = {
    '.html': 'text/html',
    '.css': 'text/css',
    '.js': 'application/javascript',
    '.json': 'application/json',
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon'
};

// 获取文件的MIME类型
function getMimeType(filePath) {
    const ext = path.extname(filePath).toLowerCase();
    return mimeTypes[ext] || 'application/octet-stream';
}

// 创建HTTP服务器
const server = http.createServer((req, res) => {
    // 解析URL
    const parsedUrl = url.parse(req.url, true);
    let pathname = parsedUrl.pathname;
    
    // 如果请求根路径，重定向到index.html
    if (pathname === '/') {
        pathname = '/index.html';
    }
    
    // 构建文件路径
    const filePath = path.join(__dirname, pathname);
    
    // 检查文件是否存在
    fs.access(filePath, fs.constants.F_OK, (err) => {
        if (err) {
            // 文件不存在，返回404
            res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' });
            res.end(`
                <!DOCTYPE html>
                <html>
                <head>
                    <meta charset="UTF-8">
                    <title>404 - 页面未找到</title>
                    <style>
                        body {
                            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                            color: white;
                            text-align: center;
                            padding: 50px;
                            margin: 0;
                        }
                        .error-container {
                            background: rgba(255, 255, 255, 0.1);
                            border-radius: 20px;
                            padding: 40px;
                            backdrop-filter: blur(10px);
                            max-width: 500px;
                            margin: 0 auto;
                        }
                        h1 { font-size: 4rem; margin: 0; }
                        p { font-size: 1.2rem; margin: 20px 0; }
                        a {
                            color: white;
                            text-decoration: none;
                            background: rgba(255, 255, 255, 0.2);
                            padding: 10px 20px;
                            border-radius: 10px;
                            display: inline-block;
                            margin-top: 20px;
                            transition: all 0.3s ease;
                        }
                        a:hover {
                            background: rgba(255, 255, 255, 0.3);
                            transform: translateY(-2px);
                        }
                    </style>
                </head>
                <body>
                    <div class="error-container">
                        <h1>404</h1>
                        <p>抱歉，您访问的页面不存在</p>
                        <p>请求的文件: ${pathname}</p>
                        <a href="/">返回首页</a>
                    </div>
                </body>
                </html>
            `);
            return;
        }
        
        // 读取文件
        fs.readFile(filePath, (err, data) => {
            if (err) {
                // 读取文件出错
                res.writeHead(500, { 'Content-Type': 'text/html; charset=utf-8' });
                res.end(`
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="UTF-8">
                        <title>500 - 服务器错误</title>
                        <style>
                            body {
                                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                                background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
                                color: white;
                                text-align: center;
                                padding: 50px;
                                margin: 0;
                            }
                            .error-container {
                                background: rgba(255, 255, 255, 0.1);
                                border-radius: 20px;
                                padding: 40px;
                                backdrop-filter: blur(10px);
                                max-width: 500px;
                                margin: 0 auto;
                            }
                            h1 { font-size: 4rem; margin: 0; }
                            p { font-size: 1.2rem; margin: 20px 0; }
                        </style>
                    </head>
                    <body>
                        <div class="error-container">
                            <h1>500</h1>
                            <p>服务器内部错误</p>
                            <p>无法读取文件: ${pathname}</p>
                        </div>
                    </body>
                    </html>
                `);
                return;
            }
            
            // 成功读取文件，返回内容
            const mimeType = getMimeType(filePath);
            res.writeHead(200, { 
                'Content-Type': mimeType + '; charset=utf-8',
                'Cache-Control': 'no-cache'
            });
            res.end(data);
        });
    });
});

// 启动服务器
server.listen(PORT, () => {
    console.log(`\n🚀 Three.js 开发流程关系图服务器已启动!`);
    console.log(`📍 本地访问地址: http://localhost:${PORT}`);
    console.log(`📁 服务目录: ${__dirname}`);
    console.log(`⏰ 启动时间: ${new Date().toLocaleString()}`);
    console.log(`\n💡 提示: 按 Ctrl+C 停止服务器\n`);
});

// 优雅关闭
process.on('SIGINT', () => {
    console.log('\n\n🛑 正在关闭服务器...');
    server.close(() => {
        console.log('✅ 服务器已安全关闭');
        process.exit(0);
    });
});

// 错误处理
server.on('error', (err) => {
    if (err.code === 'EADDRINUSE') {
        console.error(`❌ 端口 ${PORT} 已被占用，请尝试其他端口`);
    } else {
        console.error('❌ 服务器错误:', err.message);
    }
    process.exit(1);
});